<template>
  <view
    class="contract_detail_box"
    @touchmove="refresh.moveTouchendHandler"
    @touchstart="refresh.startTouchendHandler"
    @touchend="refresh.endTouchendHandler"
  >
    <!-- 内容 -->
    <view class="content">
      <action-options
        :is-icon="false"
        left-text="合同编号"
        :right-text="`${detailData?.contractualNumber}`"
      />
      <action-options
        left-text="房屋地址"
        :is-icon="false"
        :right-text="`${detailData?.houseNumber}`"
      />
      <action-options
        left-text="房屋月租"
        :is-icon="false"
        :right-text="`${detailData?.houseRent}`"
      />
      <action-options
        left-text="租住年限"
        :is-icon="false"
        :right-text="`${detailData?.term}年`"
      />
      <action-options
        left-text="租住周期"
        :is-icon="false"
        :right-text="`${detailData?.startTime} 至 ${detailData?.endTime}`"
      />
      <action-options
        left-text="付款方式"
        :is-icon="false"
        :right-text="detailData?.paymentMethods"
      />
      <action-options left-text="电子合同" @on-click="onClick('contract')" />
      <action-options
        left-text="资产确认项"
        :right-color="
          detailData?.assetConfirm == CommonSateEnum.NOT
            ? 'rgb(246, 160, 12)'
            : ''
        "
        :right-text="
          detailData?.assetConfirm == CommonSateEnum.NOT ? '未确认' : '已确认'
        "
        @on-click="assetPopup?.open()"
      />
      <action-options
        left-text="合同重要内容确认"
        :right-color="
          detailData?.importantConfirm == CommonSateEnum.NOT
            ? 'rgb(246, 160, 12)'
            : ''
        "
        :right-text="
          detailData?.importantConfirm == CommonSateEnum.NOT
            ? '未确认'
            : '已确认'
        "
        @on-click="importantPopup?.open()"
      />
      <action-options left-text="全部账单" @on-click="onClick('all_bill')" />
    </view>

    <!-- 内容 -->
    <view class="content">
      <view class="user">签约主体信息</view>
      <action-options
        :is-icon="false"
        left-text="签约人"
        :right-text="detailData?.occupants"
      />
      <action-options
        :is-icon="false"
        left-text="联系电话"
        :right-text="detailData?.phone"
      />
    </view>

    <!-- 操作选项 -->
    <view class="options">
      <view class="choose" v-if="isSigned()">
        <view class="bth"> 取消确认 </view>
        <view class="bth warn"> 合同确认 </view>
      </view>

      <view class="choose" v-if="isEffective()">
        <view class="bth"> 申请换租 </view>
        <view class="bth warn"> 申请退租 </view>
      </view>
    </view>
  </view>

  <!-- 资产确认弹窗 -->
  <contract-asset-popup
    ref="assetPopup"
    :id="id"
    :data="assetListData"
    @on-submit="assetConfirm"
    :state="detailData?.assetConfirm"
  />

  <!-- 合同重要内容确认弹窗 -->
  <constract-important-popup
    ref="importantPopup"
    :id="id"
    @on-submit="importantConfirm"
    :disabled="detailData?.importantConfirm == CommonSateEnum.YES"
  />

  <!-- 下拉刷新 -->
  <pull-down-refresh
    :opacity="refresh.moveBottom.value / 3"
    :enble-anim="refresh.isRefresh.value"
  />
</template>

<script lang="ts" setup>
import { refreshHandler } from '@/components/common/pull_down_refresh/index'
import constractImportantPopup from '@/components/business/contract/constract-important-popup.vue'
import contractAssetPopup from '@/components/business/contract/contract-asset-popup.vue'
import { ReqSelectDetailContract } from '@/api/contract'
import actionOptions from '@/components/common/action_options/action-options.vue'
import type { DetailContract } from '@/config/data/data'
import {
  ContractStateEnum,
  checkStateEnum,
  CommonSateEnum,
} from '@/config/enum/enum'
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'

//资产确认弹窗组件实例
const assetPopup = ref<InstanceType<typeof contractAssetPopup> | null>(null)

//合同重要内容确认弹窗组件实例
const importantPopup = ref<InstanceType<typeof constractImportantPopup> | null>(
  null
)

//下拉刷新控制函数
const refresh = refreshHandler(300)

/**
 * 点击事件、打开页面或显示盒子
 * @param msg: 描述
 */
const onClick = (msg: string) => {
  console.log('点击--》', msg)
  switch (msg) {
    case 'contract':
      break
    case 'all_bill':
      uni.navigateTo({ url: '/subpkg/bill/bill' })
      break
  }
}

//合同id
const id = ref(0)

//数据
const detailData = ref<DetailContract>()

//是否已签订
const isSigned = () => {
  return checkStateEnum(
    detailData.value?.contractualState ?? 0,
    ContractStateEnum.NOT_SIGNED
  )
}
//是否有效
const isEffective = () => {
  return checkStateEnum(
    detailData.value?.contractualState ?? 0,
    ContractStateEnum.VALID
  )
}

/**
 * 合同资产确认弹窗变更事件
 * @param state: 变更状态
 * @param list: 有问题的资产内容
 */
const assetConfirm = (data: { state: number; list: any[] }) => {
  if (detailData.value?.assetConfirm != null) {
    detailData.value.assetConfirm = data.state
    detailData.value.damagedItems = JSON.stringify(data.list)
  }
}

/**
 * 合同资产确认弹窗变更事件
 * @param state: 变更状态
 */
const importantConfirm = (state: number) => {
  if (detailData.value?.importantConfirm != null) {
    detailData.value.importantConfirm = state
  }
}

//获取数据
const getData = () => {
  ReqSelectDetailContract({ id: id.value }).then((res) => {
    if (res.code == 200 && res.data) {
      detailData.value = res.data
    }
  })
}

//资产列表数据
const assetListData = computed(() => {
  if (detailData.value?.damagedItems) {
    return JSON.parse(detailData.value.damagedItems)
  }
  return []
})

//页面加载
onLoad((e) => {
  if (e && e.id) {
    id.value = e.id
    getData()
  }
})
</script>

<style scoped lang="scss">
.contract_detail_box {
  padding: 30rpx;
  width: calc(100% - 30rpx);
  min-height: calc(100vh - 60rpx);
  background-color: $uni-bg-color-grey;

  .content {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    width: calc(100% - 40rpx);
    background-color: $uni-bg-color;

    .user {
      font-size: 30rpx;
      font-weight: 700;
      height: 60rpx;
      line-height: 60rpx;
    }
  }

  .options {
    width: 100%;
    height: 146rpx;
  }

  .choose {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 20rpx 50rpx 30rpx;
    width: calc(100% - 100rpx);
    height: 86rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $uni-bg-color;

    .bth {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 40%;
      color: rgb(247, 174, 49);
      background-color: rgba(243, 220, 181, 0.439);
      border-radius: 43rpx;

      &:active {
        opacity: 0.8;
      }
    }

    .warn {
      color: #fff;
      background-color: rgb(247, 174, 49);
    }
  }
}
</style>
